<div id="createDialog" class="crudDialog">
    <form id="createForm" method="post">
        <div id="add" class="form-group">
            <label for="name">名称</label>
            <input id="name" type="text" class="form-control" name="name" maxlength="20"/>
        </div>
        <div id="update" class="form-group">
            <label for="description">描述</label>
            <input id="description" type="text" class="form-control" name="description" maxlength="50"/>
        </div>
        <div class="form-group">
            <label for="authority">权限类型</label>
            <input id="authority" type="text" class="form-control" name="authority" maxlength="50"/>
        </div>
        <div class="form-group">
            <label for="treeDemo" class="active tree-lab">菜单选择</label>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="form-group text-right dialog-buttons">
            <a class="waves-effect waves-button" href="javascript:;" onclick="dataSubmit();">保存</a>
            <a class="waves-effect waves-button" href="javascript:;" onclick="createDialog.close();">取消</a>
        </div>
    </form>

</div>

<script>

    setTimeout(initData, 300);

    //设置滚动条
    $('#treeDemo').mCustomScrollbar({
        theme: 'minimal-dark',
        scrollInertia: 100,
        axis: 'yx',
        mouseWheel: {
            enable: true,
            axis: 'y',
            preventDefault: true
        }
    });

    function getRole(id, fc) {
        iGet('/api/roles/' + id, fc)
    }

    function getMenus(cb) {
        var zNodes = [];

        function addMenus(menus) {
            menus.forEach(function (menu) {
                zNodes.push({id: menu.id, pId: menu.parentId, name: menu.name})
                if (menu.children) {
                    addMenus(menu.children);
                }
            })
        }

        iGet('/api/menus', function (data) {
            var menus = data;
            zNodes = [];
            addMenus(menus);
            cb(zNodes);
        });
    }


    var id = 0;


    function initData() {
        if (location.href.indexOf('#') > 0) {
            id = location.href.split("#")[1];
        }
        //更新获取用户数据
        if (id != 0) {
            getRole(id, function (data) {
                console.log(data);
                var role = data;
                //设置input 此处没有用vue copy的代码>_<
                for (var p in role) {
                    $("input[name=" + p + "]").val(role[p]);
                }
                //获取菜单
                getMenus(function (menus) {
                    //选中菜单
                    var menuMap = new Map();
                    menus.forEach(function (menu) {
                        menuMap.set(menu.id, menu);
                    })
                    role.menuSet.forEach(function (menu) {
                        if (menuMap.get(menu.id)) {
                            menuMap.get(menu.id).checked = true;
                            menuMap.get(menu.id).open = true;
                        }
                    })
                    BuildZTreeMenus(menus);
                })

            });
        } else {
            //获取菜单
            getMenus(function (menus) {
                BuildZTreeMenus(menus);
            })
        }
        //去掉有值的input标题效果
        var inputs = $("#createForm input[type=text]");
        for (var i = 0; i < inputs.length; i++) {
            if ($(inputs[i]).val() != '') {
                $(inputs[i]).parent().find('label').addClass('active');
            }
        }
    }

    //获取选中的菜单
    function listCheckMenu() {
        var menus = [];
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        menus.splice(0, menus.length);
        for (var i = 0; i < nodes.length; i++) {
            menus.push(nodes[i].id); //获取选中节点的值
        }
        return menus;
    }

    <!--z_tree-->
    function BuildZTreeMenus(zNodes) {
        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "ps", "N": "ps"}
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
        };
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }


    function dataSubmit() {

        var zMenus = listCheckMenu();
        var data = {};
        var menuSet = [];
        menuSet.push({id: 1});//root
        console.log(zMenus)
        zMenus.forEach(function (menuId) {
            menuSet.push({id: menuId});
        })
        data.menuSet = menuSet;
        $('#createForm').serializeArray().map(function (x) {
            data[x.name] = x.value;
        });
        var beforeSend = function () {
            if ($('#name').val() == '') {
                $('#name').focus();
                return false;
            }
            if ($('#roleType').val() == '') {
                $('#roleType').focus();
                return false;
            }
        }
        var success = function (result) {
            createDialog.close();
            $table.bootstrapTable('refresh');
        }
        var error = function (jqXHR, textStatus) {
            $.confirm({
                theme: 'dark',
                animation: 'rotateX',
                closeAnimation: 'rotateX',
                title: false,
                content: textStatus != 'canceled' ? '系统异常' : '请输入',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button waves-light'
                    }
                }
            });
        }
        if (id == 0) {
            iPost('/api/roles', data, beforeSend, success, error);
        } else {
            iPut('/api/roles/' + id, data, beforeSend, success, error);
        }

    }
</script>